<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
let depts = [
  {id: 1, name: '节点1', pid: ''},
  {id: 11, name: '节点1-1', pid: 1},
  {id: 111, name: '节点1-1-1', pid: 11},
  {id: 12, name: '节点1-2', pid: 1},
  {id: 2, name: '节点2', pid: ''},
  {id: 21, name: '节点2-1', pid: 2},
]
/*
目标数据
关注目标,把第一级元素放到最外层,分别把孩子放到父节点的children里面
let list = [
   {id: 1, name: '节点1', pid: '', children:[
      {id: 11, name: '节点1-1', pid: 1,children: [
        {id: 111, name: '节点1-1-1', pid: 11},
      ]},
      {id: 12, name: '节点1-2', pid: 1},
   ]},
   {id: 2, name: '节点2', pid: '',children: [
    {id: 21, name: '节点2-1', pid: 2},
   ]},
]
*/
//关注数据处理
//给每一个节点(循环,forEach)找当前节点的孩子(找到,filter)
//最外层是pid为''的数据(filter)
// depts.forEach(t=>{
//   let children = depts.filter(m=>m.pid ===t.id)
//   if(children.length>0){
//     t.children = children
//   }
// })
// let list = depts.filter(t=>t.pid==="")
// console.log(list);

// 通过递归函数
// function translateListToTree(pid){
//   // 找找children
//   let arr =depts.filter(m=>m.pid ===pid)
//    depts.forEach(t=>{
//     // 通过递归继续找
//     // 加一个条件防止死循环
//     if(t.pid===pid){
//     let children = translateListToTree(t.id)
//     if(children.length>0){
//       t.children = children
//     }
//     }
//    })
//    return arr
// }
// let list = translateListToTree('')
// console.log(list);

// 列表不要访问全局变量
function translateListToTree(list,pid){
  // 找找children
  let arr =list.filter(m=>m.pid ===pid)
  list.forEach(t=>{
    // 通过递归继续找
    // 加一个条件防止死循环
    if(t.pid===pid){
    let children = translateListToTree(list,t.id)
    if(children.length>0){
      t.children = children
    }
    }
   })
   return arr
}
let list = translateListToTree(depts,'')
console.log(list);
</script>
</html>
